<template>
  <drag_down_animation ref="loadComponent" @onRefresh="onRefresh" class="content-list">
    <div slot="indicator">
      <loading_indicator></loading_indicator>
    </div>
    <div slot="content">
      <div v-for="(item,index) in items" @click="onItemClicked(item,index)">
        <card_item :item="item"  class="content-animation" :style="{animationDelay: index*50+'ms'}"
                    ></card_item>
      </div>
    </div>
  </drag_down_animation>
</template>
<style scoped>

  .content-list{
    height: 100%;
    width: 100%;
  }

  .content-animation{
    animation: listAnimation 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  @keyframes listAnimation {
    0% {transform: matrix(1,0,0,1,0,100); opacity: 0}
    100% {transform: matrix(1,0,0,1,0,0);}
  }
</style>
<script>
  let card_item = resolve => {
    require(['../card_item'],resolve);
  }
  let drag_down_animation = resolve => {
    require(['../drag_down_animation'],resolve);
  }
  let loading_indicator = resolve => {
    require(['../loading_indicator'],resolve);
  }
export default{
  components:{
    'card_item':card_item,
    'drag_down_animation':drag_down_animation,
    'loading_indicator':loading_indicator,
  },
  props:{
    items:{
      type: Array,
      default:function () {
        return []
      }
    }
  },
  methods:{
    onItemClicked(item,index){
      this.$emit('onItemClicked',item,index);
    },
    onRefresh(){
      this.$emit('onRefresh')
    },
    stopRefresh(){
    	if(this.$refs.loadComponent){
        this.$refs.loadComponent.stopRefresh()
      }
    }
  }
}
</script>
